<template>
  <div class='page'>
    <el-card>
      <el-form ref="form"
               :model="formData"
               :rules="rules"
               label-width="80px">
        <el-form-item label="日期"
                      prop="date">
          <el-date-picker v-model="formData.date"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="申请数量"
                      prop="number">
          <el-input type="number"
                    v-model="formData.number"
                    placeholder="申请数量"></el-input>
        </el-form-item>
        <el-form-item label="地址"
                      prop="address">
          <el-cascader v-model="formData.address"
                       :options="options"
                       :props="{ expandTrigger: 'hover' }"></el-cascader>
        </el-form-item>
        <el-form-item>
          <div style="float:right">
            <el-button @click="handleReset('form')">取消</el-button>
            <el-button @click="handleSubmit('form')"
                       type="primary">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        date: '',
        number: '',
        address: '',
      },
      rules: {
        date: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请选择地址', trigger: 'blur' }
        ]
      },
      options: [{
        value: "河南",
        label: "河南",
        children: [{
          value: "郑州",
          label: "郑州",
          children: [
            {
              value: "中原区",
              label: "中原区",
            }, {
              value: "二七区",
              label: "二七区",
            }
          ]
        }, {
          value: "漯河",
          label: "漯河",
          children: [
            {
              value: "郾城区",
              label: "郾城区",
            }
          ]
        }, {
          value: "许昌",
          label: "许昌",
          children: [
            {
              value: "魏都区",
              label: "魏都区",
            }
          ]
        }]
      }]
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    handleSubmit(form) {
      this.$refs[form].validate(flag => {
        if (flag) {
          if (!this.user.token) {
            this.$alert('请先登录再进行添加数据', '提示')
            return
          }
          this.$store.commit("setTable", [...this.$store.state.tableData, {
            ...this.formData,
            address: this.formData.address.join("/"),
            state: 1,
            name: this.user.name,
            id: Math.random() * 1000
          }])
          this.$router.push("/")
        }
      })
    },
    handleReset(form) {
      this.$refs[form].resetFields()
    }
  }
}
</script>

<style lang='scss' scoped>
.el-card {
  width: 90%;
  padding: 20px;
  min-height: 500px;
  margin: 0 auto;
}
.el-date-editor,
.el-cascader {
  width: 100%;
}
</style>